<!--
 * @Descripttion: 部门员工选项组件
 * @Author: caijj
 * @Date: 2021-02-08 09:06:20
 * @LastEditors: caijj
 * @LastEditTime: 2021-02-26 11:12:06
-->
<template>
  <div class="personnel-ptions" v-bind="$attrs">
    <!--部门员工-->
    <div class="lft">
      <div class="selector">
        <i class="el-icon-office-building" />
        <el-cascader
          ref="departCascader"
          :options="$attrs.department"
          clearable
          :props="{
            emitPath: false,
            checkStrictly: true,
            value: 'id',
            label: 'name',
            expandTrigger: 'click'
          }"
          class="cascader"
          :placeholder="$attrs.placeholder||'请选择部门'"
          @change="handleNodeClick"
        />
        <!-- 员工列表 -->
      </div>
      <div class="content">
        <el-input
          v-model="filterText"
          class="search-input"
          placeholder="输入关键字过滤员工"
          clearable
        />
        <ul v-show="hasEmployees" class="list">
          <li v-for="item in employees" :key="item.userId">
            <el-checkbox
              v-model="item.checked"
              @change="status => handleChecked(status, item)"
            >{{ item.name }}</el-checkbox>
          </li>
        </ul>
        <div v-show="!hasEmployees" class="empty">暂无员工可供选择</div>
      </div>
    </div>
    <!--选中项-->
    <div class="rgt">
      <div class="title">
        {{ countText }}
        <i @click="handlerClear">清空</i>
      </div>
      <div class="content">
        <div v-show="!tagsNodes.length" class="empty">
          <i class="el-icon-d-arrow-left" />请您从左边框人员项选择
        </div>
        <template v-for="(item, $index) in tagsNodes">
          <el-tag
            :key="item.userId"
            class="tag"
            closable
            @close="handleUnChecked(item.userId, $index)"
          >{{ item.name }}</el-tag>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // eslint-disable-next-line vue/require-default-prop
    value: [Array, String, Object, Number],
    // 树形配置项
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'label'
        };
      }
    }
  },
  data() {
    return {
      filterText: '',
      departmentName: '',
      tagsNodes: [],
      employees: []
    };
  },
  computed: {
    countText() {
      const length = this.tagsNodes.length;
      const lave = 50 - length;
      return `已选${length}（还能选${lave}条）`;
    },
    hasEmployees() {
      return this.employees.length > 0;
    }
  },
  watch: {
    '$attrs.employees': {
      immediate: true,
      deep: true,
      handler(array) {
        this.filterText = ''; // 重置过滤条件
        const findIndex = ele => {
          return this.tagsNodes.findIndex(item => item.userId === ele.userId);
        };
        this.employees = array.map(ele => {
          ele.checked = findIndex(ele) > -1;
          return ele;
        });
      }
    },
    // 搜索条件
    filterText(text) {
      const array = this.$attrs.employees;
      if (text) {
        const filter = array.filter(({ name }) => (name ? name.includes(text) : false));
        this.employees = filter;
      } else {
        this.employees = array;
      }
    },
    // 选中项
    tagsNodes: {
      deep: true,
      handler(array) {
        console.log(array);
        const personnel = array.map(item => item.userId);
        this.$emit('input', personnel);
      }
    }
  },
  created() {
    this.initVal();
  },
  methods: {
    initVal() {
      if (!this.value || this.value.length === 0) return;
      this.value.forEach(item => {
        this.tagsNodes.push(item);
      });
    },
    // 选中项
    handleChecked(checked, option) {
      const findFn = item => item.userId === option.userId;
      const index = this.tagsNodes.findIndex(findFn);
      const isExist = index > -1;
      // 如果存在，又是反选，删除
      if (isExist && !checked) {
        this.tagsNodes.splice(index, 1);
      }
      // 如果不存在，又是正选， 增加
      if (!isExist && checked) {
        this.tagsNodes.push(option);
      }
    },
    // 处理反选
    handleUnChecked(id, index) {
      this.tagsNodes.splice(index, 1);
      this.employees.forEach(item => {
        if (item.userId === id) return (item.checked = false);
      });
    },
    // 分发部门节点点击
    handleNodeClick(id) {
      this.$refs.departCascader.dropDownVisible = false;
      this.$emit('onDepartmentClick', id);
    },
    // 清空操作
    handlerClear() {
      this.tagsNodes = [];
      this.employees.forEach(item => (item.checked = false));
    }
  }
};
</script>
<style lang="scss" scoped>
.personnel-ptions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .lft {
    flex: 0 0 48%;
    width:  48%;
    border: 1px solid #eee;
    height: 280px;
  }
  .rgt {
    @extend .lft;
    .content {
      word-break: keep-all;
      overflow-y: scroll;
      max-height: 280px;
      .tag {
        margin: 0 10px 10px;
      }
    }
  }
  .selector {
    display: flex;
    justify-content: space-around;
    // padding: 0 10px;
    align-items: center;
    height: 40px;
    line-height: 40px;
    background: #f5f5f5;
    color: #333;
    margin-bottom: 10px;
    .cascader {
      margin-left: -40px;
      width:90%;
    }
    ::v-deep .el-input__inner{
      border: none;
      background: transparent;
    }
  }
  .content {
    .search-input {
      margin:0 10px;
      width:93%;
    }
  }
  .empty {
    text-align: center;
    line-height: 225px;
    color: #bfbfbf;
  }
  .title {
    text-indent: 20px;
    height: 40px;
    line-height: 40px;
    background: #f5f5f5;
    color: #333;
    margin-bottom: 10px;
    i {
      float: right;
      margin-right: 10px;
      color: #0079fe;
      cursor: pointer;
    }
  }
  .list {
    margin: 0;
    padding: 10px;
    overflow-y: scroll;
    max-height: 195px;
    & > li {
      list-style: none;
    }
  }
}
</style>
